<template>
  <div
    class="gap-x-6 gap-y-3 grid grid-cols-2 sm:gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-3 whitespace">
    <div class="sm:mr-0 w-full relative cursor-pointer" v-for="item in items" :key="item.id" @click="handleClick(item)">
      <img :src="imageBaseUrl + item.picUrl" alt="城市列表" class="rounded-lg w-full aspect-square object-cover" />
      <div class="pt-3">
        <div class="flex items-center justify-between">
          <h3 class="text-sm font-semibold text-gray-800 truncate" :title="item.title">
            {{ $store.getters.isZh ? item.name : item.nameEn }}
          </h3>
          <!-- <span class="text-xs text-white bg-yellow-500 px-2 py-1 rounded-full">{{ item.tag }}</span> -->
        </div>
      </div>
      <van-icon
        v-if="showLiked"
        class="absolute top-2 right-2"
        :name="item.favorite ? 'like' : 'like-o'"
        :color="item.favorite ? '#ff7a00' : '#999'"
        size="28"
        @click.stop="handleFavorite(item)" />
    </div>
  </div>
</template>

<script>
import { addFavorite, removeFavorite } from "@/apis/favorite"
export default {
  name: "PropertyGrid",
  props: {
    items: { type: Array, required: true },
    showLiked: { type: Boolean, required: false },
  },
  data() {
    return {
    }
  },
  
  computed: {
    imageBaseUrl() {
      return process.env.VUE_APP_IMAGE_URL
    },
  },
  methods: {
    async handleFavorite(item) {
      try {
        if (item.favorite) {
          await removeFavorite({ spuId: item.id })
          this.$emit('updateFavorite', item.id, false)
        } else {
          await addFavorite({ spuId: item.id })
          this.$emit('updateFavorite', item.id, true)
        }
      } catch (error) {
        console.log("object :>> ", error)
      }
    },
    handleClick(item) {
      this.$router.push({ name: 'productDetail', query: { id: item.id } })
    },
  },
}
</script>

<style scoped></style>
